<template>
  <el-form-item :label="label">
    <el-select
      v-model="model"
      :placeholder="placeholder"
      style="width: 100%;"
      :loading="loading"
      clearable
    >
      <el-option label="无特效" value="" />
      <el-option
        v-for="effect in effects"
        :key="effect.id"
        :value="effect.id"
        :label="effect.name"
      >
        <span>{{ effect.name }}</span>
        <span v-if="effect.description" style="color: #8492a6; font-size: 13px">
          - {{ effect.description }}
        </span>
      </el-option>
    </el-select>
  </el-form-item>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import mergeService from '@/views/Mergeview/services/mergeService.js';

const props = defineProps({
  modelValue: [String, Number],
  label: {
    type: String,
    default: '过渡特效'
  },
  placeholder: {
    type: String,
    default: '选择过渡特效'
  }
});
const emit = defineEmits(['update:modelValue']);

const model = ref(props.modelValue);
watch(() => props.modelValue, v => model.value = v);
watch(model, v => emit('update:modelValue', v));

const effects = ref([]);
const loading = ref(false);

const loadTransitionEffects = async () => {
  loading.value = true;
  try {
    const response = await mergeService.getTransitionEffects();
    if (response.success && response.data) {
      effects.value = response.data;
    }
  } catch (e) {
    ElMessage.error('加载过渡特效失败');
  } finally {
    loading.value = false;
  }
};

onMounted(loadTransitionEffects);
</script>